<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <title>慕课书评网</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet"
          href="/assets/vant/index.css"/>

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="/assets/vue/vue.global.js"></script>
    <script src="/assets/vant/vant.min.js"></script>
    <script src="/assets/axios/axios.js"></script>
</head>
<body>
<div id="app">
    <van-nav-bar >
        <template #left>
            <a href="/" style="padding-top: 10px">
                <img src="/images/logo2.png" style="width: 80px">
            </a>
        </template>
    </van-nav-bar>
    <h3 style="padding-left:32px">会员登录</h3>
    <!-- 注册表单 -->
    <van-form @submit="onSubmit"  ref="form">
        <van-cell-group inset>
            <van-notice-bar
                    :scrollable="false"
                    text="TIPS:未注册手机号验证成功后将自动创建账户"
            ></van-notice-bar>
            <van-field
                    v-model="form.mobile"
                    name="mobile"
                    label="手机号"
                    placeholder="请输入您的手机号"
                    autocomplete = "false"
                    :rules="[{ required: true, message: '请输入手机号' },{ pattern:/^\d{11}$/, message: '手机号格式不正确' }]"
            ></van-field>
            <van-field
                    v-model="form.verifycode"
                    name="vcode"
                    center
                    :disabled = "!state.enableVCBtn"
                    clearable
                    label="短信验证码"
                    placeholder="请输入短信验证码"
                    autocomplete = "false"
                    :rules="[{ required: true, message: '请输入验证码' },{ pattern:/^\d{4}$/, message: '验证码为4位数字' }]"
            >
                <template #button>
                    <van-button v-show="!state.sendCd" @click="onSendVC()" size="small" type="primary">发送验证码</van-button>
                    <van-button v-show="state.sendCd" size="small" disabled  type="primary">{{state.second}}秒后重新发送</van-button>
                </template>
            </van-field>
        </van-cell-group>

        <van-cell-group inset>

        </van-cell-group>
        <div style="margin: 16px;">
            <van-button :disabled = "!state.enableSubmitBtn" round block type="primary" native-type="submit">
                登录
            </van-button>
        </div>
    </van-form>
</div>
<script>
    let objApp = null;
    let timer = null;

    //倒计时
    function countDown() {
        objApp.state.second--;
        if(objApp.state.second==0){
            objApp.state.sendCd = false;
            clearInterval(timer);
        }
    }

    const main = {
        data() { //初始数据
            return {
                state : {
                    sendCd : false ,//发送短信CDing
                    second : 60,
                    enableSubmitBtn : false , //是否允许提交
                    enableVCBtn : false  //验证码是否允许输入
                },
                form:{
                    mobile:"",
                    verifycode : ""
                }
            }

        }
        , methods: {
            backward : function(){
                window.location = "/";
            },
            onSendVC: function(){
                const that = this;
                this.$refs.form.validate("mobile").then(function(){
                    const params = new URLSearchParams();
                    params.append("mobile", that.form.mobile);

                    axios.post("/api/members/verification_codes" , params)
                        .then(function(response){
                            const json = response.data;
                            if(json.code == "0"){
                                objApp = that;
                                that.state.sendCd = true;
                                that.state.second = 60;
                                timer = setInterval("countDown()", 1000);
                                that.state.enableSubmitBtn = true;
                                that.state.enableVCBtn = true;
                                that.$toast("短信已发送");
                                console.info(json);
                            }else{
                                console.error(json);
                                that.$toast(json.message);
                            }
                        })
                });
            },
            onSubmit : function(){
                const that = this;
                this.$refs.form.validate("mobile").then(function(){
                    const params = new URLSearchParams();
                    params.append("mobile", that.form.mobile);
                    params.append("vcode", that.form.verifycode);

                    axios.post("/api/members" , params)
                        .then(function(response){
                            const json = response.data;
                            if(json.code == "0"){
                                console.info(json);
                                sessionStorage.mid = json.data.member.memberId;
                                window.location.href = "/";
                            }else {
                                console.error(json);
                                that.$toast(json.message);
                            }
                        })
                });
            }
        }
        , mounted() {
            const that = this;
        }
    };
    const app = Vue.createApp(main);
    app.use(vant);
    app.use(vant.Lazyload);
    app.mount("#app");
</script>
</body>
</html>
